<template>
    <div class="home-header">
        <span class="header-text">可视化展板-ECharts</span>
        <span class="header-time">当前时间: {{headerTime | tansformDate}}</span>
    </div>
</template>

<script>
    export default {
        name: 'HomeHeader',
        data() {
            return {
                //当前时间
                headerTime: new Date(),
                //时间实例,用于组件销毁时清空计时器
                timer: null
            }
        },
        //DOM出来后,开启定时器,显示时间
        mounted() {
            this.timer = setInterval(() => {
                this.headerTime = new Date()
            }, 1000)
        },
        //组件销毁后,清空定时器
        beforeDestoryed() {
            if (this.timer)
                clearInterval(this.timer)
        }
    }
</script>

<style lang="less" scoped>
    .home-header {
        height: 1.25rem;
        background-image: url('~assets/images/head_bg.png');
        text-align: center;
        position: relative;

        .header-text {
            color: #fff;
            font-size: .475rem;
            line-height: 1rem;
        }

        .header-time {
            position: absolute;
            right: .375rem;
            line-height: .9375rem;
            font-size: .25rem;
            color: rgba(255, 255, 255, 0.7);
        }
    }
</style>